import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    server: {
      port: 8080,
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_API_BASE_URL,
          changeOrigin: true,
          rewrite: path => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
        },
        '/ws': {
          target: env.VITE_WS_BASE_URL,
          ws: true
        }
      }
    },
    build: {
      target: 'es2015', // 浏览器兼容
      minify: 'terser', // 压缩方式
      terserOptions: {
        // 压缩配置
        compress: {
          drop_console: true, // 去除console
          drop_debugger: true // 去除debugger
        }
      },
      rollupOptions: {
        // 分包配置
        output: {
          // 分包输出目录
          manualChunks: {
            // 分包规则
            'element-plus': ['element-plus'], // 自定义分包，将element-plus打包成一个文件
            'vue-vendor': ['vue', 'vue-router', 'pinia'], // 自定义分包，将多个依赖打包成一个文件
            utils: ['dayjs', 'axios'] // 自定义分包，将多个依赖打包成一个文件
          },
          chunkFileNames: 'static/js/[name]-[hash].js', // 分包输出文件名
          entryFileNames: 'static/js/[name]-[hash].js', // 入口文件输出文件名
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]' // 静态资源输出文件名
        },
        treeshake: true // 开启treeshake，删除未使用的代码
      },
      chunkSizeWarningLimit: 1000,
      assetsDir: 'assets',
      brotliSize: false
    },
    css: {
      preprocessorOptions: {
        // 全局引入scss变量
        scss: {
          additionalData: `@import "@/assets/styles/variables.scss";` // 引入全局样式
        }
      }
    }
  }
})
